import React,{useState,useEffect} from 'react'
import { PageHeader, Descriptions } from 'antd';
import moment from 'moment';
import axios from 'axios';
import style from '../sandbox/news-manage/News.module.css'
import {HeartTwoTone} from '@ant-design/icons';
export default function Detail(props) {
    const [newsInfo, setnewsInfo] = useState(null)
    useEffect(() => {
      axios.get(`/news/${props.match.params.id}?_expand=category&_expand=role`).then(res=>{
          setnewsInfo({
            ...res.data,
            view:res.data.view + 1
          })
          // 同步后端  
          return res.data
      }).then(data=>{
        axios.patch(`/news/${props.match.params.id}`,{
          view:data.view+1
        })
      })
    }, [props.match.params.id])
    const handleStar = ()=>{
      setnewsInfo({
        ...newsInfo,
        star:newsInfo.star+1
      })
      axios.patch(`/news/${props.match.params.id}`,{
        star:newsInfo.star+1
      })
    }
  return (
    <div>
      {
        newsInfo && <div>
          <PageHeader
            onBack={() => window.history.back()}
            title={newsInfo.title}
            subTitle={
              <div>
                {newsInfo.category.title}
                <HeartTwoTone twoToneColor="#eb2f96" style={{paddingLeft:'20px'}} onClick={()=>handleStar()} />
              </div>
            }
            >
            <Descriptions size="small" column={3}>
                <Descriptions.Item label="创建者">{newsInfo.author}</Descriptions.Item>
                <Descriptions.Item label="发布时间">{newsInfo.publishTime?moment(newsInfo.publishTime).format('YYYY/MM/DD HH:mm:ss'):'-'}</Descriptions.Item>
                <Descriptions.Item label="区域">{newsInfo.region}</Descriptions.Item>
                <Descriptions.Item label="访问数量">
                  <span className={style.view}>{newsInfo.view}</span>
                </Descriptions.Item>
                <Descriptions.Item label="点赞数量">
                  <span className={style.star}>{newsInfo.star}</span>
                </Descriptions.Item>
                <Descriptions.Item label="评论数量">
                  <span className={style.comment}>0</span>
                </Descriptions.Item>
            </Descriptions>
          </PageHeader>
          <div dangerouslySetInnerHTML={{__html:newsInfo.content}} className={style.dangerContent}></div>
        </div>
      }
    </div>
  )
}
